/* typehints:start */
import { GameRoot } from "../../root";
/* typehints:end */

import { keepDecimal, makeDiv, ObjectDelKey } from "../../../core/utils/utils";
import { BaseHUDPart } from "../base_hud_part";
import { SelectBtnGroup } from "../select_btn_group";
import { getPresitgeTitle } from '../../defines/presitge_define'
import { LimbsTypeDefine } from "../../defines/people_limbs";
import { attrDefine } from "../../defines/attr_define";
import { EquipTypeDefine } from "../../defines/equip_define";
import { globalConfig } from "../../../config/global";
import { elementDefine } from "../../defines/element_define";

export class HUDPlayerPage extends BaseHUDPart{
  constructor(root){
    /** @type {GameRoot} */
    super(root);
  }

  createElements(parent){
    this.element = makeDiv(parent, 'player_page', ['hud_page', 'page', 'player_page', 'remove'], `
      <div class="select-player">
        <div class="btns"></div>
      </div>

      <div class="wrapper">
        <div class="select-attr">
        </div>
        <div class="content">
          <div class="attr-page page"></div>
          <div class="fate-page page"></div>
          <div class="limbs-page page"></div>
          <div class="equip-page page"></div>
          <div class="method-page page"></div>
          <div class="skill-page page"></div>
          <div class="reputation-page page"></div>
          <div class="control-page page">
            <div class="styledButton expel">逐出队伍</div>
          </div>
        </div>
      </div>
    `);
  }
  
  initialize(){
    this.people = null;

    this.drawPlayerPanel();
    this.handleBtns();
  }

  handleBtns(){
    this.trackClicks(this.element.querySelector('.expel'), () => {
      let { ok } = this.root.gameState.dialogs.showInfo('确认操作', `你是否对<${this.people.getName()}>进行<逐出>操作`,
        ['cancel:bad:取消', 'ok:success:确认']
      );

      ok.add(() => {
        if(this.people.data._id == globalConfig.player._id){
          this.root.gameState.dialogs.showWarning('禁止', '无法将玩家角色逐出');
          return;
        }
  
        this.root.playerData.troops = this.root.playerData.troops.filter(item => {
          if(item.data._id != this.people.data._id) return true;
        })

        // 如果有对应的npc，那么让它回归
        let storeId = Object.keys(this.root.itemData.npcData).find(storeId => {
          let item = this.root.itemData.npcData[storeId];
          if(item.peopleAttr._id == this.people.data._id) return true;
        })

        if(storeId){
          let npc = this.root.itemData.npcData[storeId];
          npc.npcAttr.isLive = true;
          // npc重新回到世界中，如果事件修改了npc的位置、身份，回归时不会被覆盖
          npc.peopleAttr = ObjectDelKey(this.people.internalGetData(), ['mapPos', 'worldPos', 'identitys']);
          // 重新初始化该npc
          this.root.worldMap.getIdNpcs(storeId).map(item => {
            item.initialize();
          })

          this.root.hud.parts.worldPage.renderNpc();
        }
  
        this.root.message('alert', `逐出<${this.people.getName()}>`);
        this.root.savePlayerData();
        this.drawPlayerPanel();
      })
    })
  }

  drawPlayerPanel(){
    let players = this.root.playerData.troops;
    let btns = players.map((item, i) => {
      return {
        text: item.getName(),
        classType: 'item',
        active: i == 0,
        click: () => {
          this.drawPeople(item);
        }
      }
    })

    new SelectBtnGroup(this.root, this.element, '.select-player .btns', btns);

    new SelectBtnGroup(this.root, this.element, '.select-attr', [
      {
        text: '属性',
        classType: 'item',
        active: true,
        page: '.content|attr-page'
      },
      {
        text: '命运',
        classType: 'item',
        page: '.content|fate-page'
      },
      {
        text: '肢体',
        classType: 'item',
        page: '.content|limbs-page'
      },
      {
        text: '装备',
        classType: 'item',
        page: '.content|equip-page'
      },
      {
        text: '功法',
        classType: 'item',
        page: '.content|method-page'
      },
      {
        text: '神通',
        classType: 'item',
        page: '.content|skill-page'
      },
      {
        text: '名望',
        classType: 'item',
        page: '.content|reputation-page'
      },
      {
        text: '操作',
        classType: 'item',
        page: '.content|control-page'
      },
    ]);
  }

  drawPeople(item){
    this.people = item;

    this.drawAttrPage();
    this.drawLimbs();
    this.drawEquip();
    this.drawReputation();
  }
  
  drawAttrPage(){
    let parent = this.element.querySelector('.attr-page');

    parent.innerHTML = `
      <h3>状态</h3>
      <p class="info">${attrDefine.hp.text}: <span>${this.people.data.useAttr[attrDefine.hp.key]}/${this.people.data.attr[attrDefine.hpMax.key]}</span></p>
      <p class="info">${attrDefine.mana.text}: <span>${this.people.data.useAttr[attrDefine.mana.key]}/${this.people.data.attr[attrDefine.manaMax.key]}</span></p>

      <h3 class="mt-2">属性</h3>
      <p class="info">种族: <span>${this.people.getRace().text}</span></p>
      <p class="info">性别: <span>${this.people.getGender()}</span></p>
      <p class="info">年龄: <span>${this.people.data.useAttr[attrDefine.age.key]}/${this.people.data.attr[attrDefine.ageMax.key]}</span></p>
      <p class="info">修真: <span>${this.people.getLevelDesc('xian')}</span></p>
      <p class="info">炼体: <span>${this.people.getLevelDesc('force')}</span></p>
      <p class="info">${attrDefine.blood.text}: <span>${this.people.data.attr[attrDefine.blood.key]}</span></p>
      <p class="info">${attrDefine.agile.text}: <span>${this.people.data.attr[attrDefine.agile.key]}</span></p>
      <p class="info">${attrDefine.cons.text}: <span>${this.people.data.attr[attrDefine.cons.key]}</span></p>
      <p class="info">${attrDefine.spirit.text}: <span>${this.people.data.attr[attrDefine.spirit.key]}</span></p>
      <p class="info">天资: <span>${this.people.getDiffDesc()}</span></p>

      <h3 class="mt-2">战斗属性</h3>
      <p class="info">${attrDefine.bloodAtk.text}: <span>${this.people.data.attr[attrDefine.bloodAtk.key]}</span></p>
      <p class="info">${attrDefine.spiritAtk.text}: <span>${this.people.data.attr[attrDefine.spiritAtk.key]}</span></p>
      <p class="info">${attrDefine.consAtk.text}: <span>${this.people.data.attr[attrDefine.consAtk.key]}</span></p>
      <p class="info">${attrDefine.bloodDef.text}: <span>${this.people.data.attr[attrDefine.bloodDef.key]}</span></p>
      <p class="info">${attrDefine.spiritDef.text}: <span>${this.people.data.attr[attrDefine.spiritDef.key]}</span></p>
      <p class="info">${attrDefine.consDef.text}: <span>${this.people.data.attr[attrDefine.consDef.key]}</span></p>
      <p class="info">${attrDefine.atkSpeed.text}: <span>${this.people.data.attr[attrDefine.atkSpeed.key]}</span></p>
      <p class="info">${attrDefine[[elementDefine.gold.key] + 'Atk'].text}: <span>${this.people.data.attr[[[elementDefine.gold.key] + 'Atk']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.wood.key] + 'Atk'].text}: <span>${this.people.data.attr[[[elementDefine.wood.key] + 'Atk']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.water.key] + 'Atk'].text}: <span>${this.people.data.attr[[[elementDefine.water.key] + 'Atk']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.fire.key] + 'Atk'].text}: <span>${this.people.data.attr[[[elementDefine.fire.key] + 'Atk']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.earth.key] + 'Atk'].text}: <span>${this.people.data.attr[[[elementDefine.earth.key] + 'Atk']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.gold.key] + 'Def'].text}: <span>${this.people.data.attr[[[elementDefine.gold.key] + 'Def']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.wood.key] + 'Def'].text}: <span>${this.people.data.attr[[[elementDefine.wood.key] + 'Def']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.water.key] + 'Def'].text}: <span>${this.people.data.attr[[[elementDefine.water.key] + 'Def']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.fire.key] + 'Def'].text}: <span>${this.people.data.attr[[[elementDefine.fire.key] + 'Def']]}</span></p>
      <p class="info">${attrDefine[[elementDefine.earth.key] + 'Def'].text}: <span>${this.people.data.attr[[[elementDefine.earth.key] + 'Def']]}</span></p>
    `
  }

  drawReputation(){
    let parent = this.element.querySelector('.reputation-page');

    let presitgeText = ``;

    Object.keys(this.people.data.presitge).map(pos => {
      let world = this.root.worldMap.getMapClip(pos);
      let presitge = this.people.data.presitge[pos]

      if(world){
        presitgeText += `
          <span class="tag dark">${world.title}(${getPresitgeTitle(presitge)})</span>
        `
      }
    })

    parent.innerHTML = `
      <h3>声望</h3>
      ${presitgeText || '无'}

      <h3 class="mt-1">身份</h3>
      无
    `
  }

  drawLimbs(){
    let parent = this.element.querySelector('.limbs-page');
    let limbs = this.people.getLimbs();
    parent.innerHTML = '';

    limbs.map(item => {
      // ${item.status == 0 ? '(残疾)' : ''}
      makeDiv(parent, '', ['limb'], `
        <div class="title">
          ${item.text || LimbsTypeDefine[item.key].text}
        </div>

        <!--<p>是否致命: ${item.dead ? '是' : '否'}</p>-->
        <!--<p>血量占比: ${keepDecimal((item.hp || 1) * 100, 0)}%</p>-->
        <p>效果转化: ${keepDecimal((item.power || 1) * 100, 0)}%</p>
      `)
    })
  }

  drawEquip(){
    let parent = this.element.querySelector('.equip-page');
    let limbs = this.people.getLimbs();
    parent.innerHTML = '';

    limbs.map(item => {
      let dom = makeDiv(parent, '', ['limb'], `
        <div class="title">
          ${item.text || LimbsTypeDefine[item.key].text}
          ${item.status == 0 ? '(残疾)' : ''}
          (穿着: ${item.equips.length}/${item.equipNum})
        </div>

        <div class="equips">
        </div>
      `)
      let equipsParent = dom.querySelector('.equips');

      item.equips.map(equip => {
        let dom = makeDiv(equipsParent, '', ['equip'], `
          ${equip.getTitle()}
          <p class="min-text">类型: ${EquipTypeDefine[equip.getEquipZIndex()].text}</p>
        `);

        this.trackClicks(dom, () => {
          this.root.hud.parts.goodsBoard.handleShowGoodsBoard(equip);
        });
      })
    })
  }
}